<template>
  <el-container style="height: 610px; border: 5px solid #eee">
    <super-admin-aside @asideIndexChanged="asideIndexChanged"></super-admin-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <super-admin-header></super-admin-header>
      </el-header>
      <all-employee-list v-if="asideIndex == '1-1'"></all-employee-list>
      <alter-employee-information v-show="asideIndex == '1-2'"></alter-employee-information>
      <add-employee-information v-show="asideIndex == '1-3'"></add-employee-information>
      <employee-salary v-if="asideIndex == '2-1'"></employee-salary>
      <alter-employee-salary v-if="asideIndex == '2-2'"></alter-employee-salary>
      <add-employee-salary v-show="asideIndex == '2-3'"></add-employee-salary>
    </el-container>
  </el-container>
</template>

<script>
import AllEmployeeList from "../components/AllEmployeeList.vue";
import SuperAdminAside from "../components/SuperAdminAside.vue";
import SuperAdminHeader from "../components/SuperAdminHeader.vue";
import EmployeeSalary from "../components/EmployeeSalary.vue";
import AlterEmployeeInformation from "../components/AlterEmployeeInformation.vue";
import AddEmployeeInformation from "../components/AddEmployeeInformation.vue";
import AlterEmployeeSalary from "../components/AlterEmployeeSalary.vue";
import AddEmployeeSalary from "../components/AddEmployeeSalary.vue";

export default {
  data() {
    return {
      asideIndex: "1-1"
    };
  },
  methods: {
    asideIndexChanged: function(selectIndex) {
      var _this = this;
      _this.asideIndex = selectIndex;
    }
  },
  components: {
    AllEmployeeList,
    SuperAdminAside,
    SuperAdminHeader,
    EmployeeSalary,
    AlterEmployeeInformation,
    AddEmployeeInformation,
    AlterEmployeeSalary,
    AddEmployeeSalary
  }
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
